/** @jsxImportSource @emotion/react */
import * as React from "react";
import {InspectRecordLayout, InternalItemProps, OriginalViewProps, useItemInputControl,} from "../../common/base";
import {assertNamesUnique, createItem,} from "../../common/eHelper";
import {useRecordListSubr} from "../../hook/useRecordListSub";
import {DeviceSurvey} from "../../elevator/editor";
import {useMedia} from "use-media";
import {Button, Text, TextArea, useToast} from "customize-easy-ui-component";
import {EditStorageContext} from "../../StorageContext";
import {ConclusionPolyZ, itemA结论} from "./Conclusion";

export const config设备概况 = [
    [['制造单位', '_$服务单位'], ['制造许可证编号', '制许可'],],
    [['产品名称', '产品名'], ['产品标准','产品标'], ],
    [['产品型号及规格','型规格'], ['产品编号',{n:'产编号',t:'B'}], ],
    [['产品批号','产批号'], ['制造日期','制造日' ], ],
    [['产品数量',{n:'产数量',u:'米'}], ['数量备注',{n:'数量备',t:'B'}], ],
];
//【flexBox做个表格】类似表格的：各列宽度依据内容自适应的，无需加td拆分设置列的固定宽度。
export const render数量备 = {
  view: (orc: any) => {
    return <div css={{
        display: 'flex',
        width: '-webkit-fill-available',
        height: '-webkit-fill-available',
        justifyContent: 'flex-start',
        alignItems: 'stretch',
        minHeight: 'inherit',
        gap: 0,
        "td:has(&)": {
            padding: 'unset !important',
            height: 'inherit',
        },
    }}>
        <div css={{
            display: 'inline-flex',
            flexGrow: 1,
            maxWidth: '100%',
            boxSizing: 'border-box',
            overflowWrap: 'anywhere',
            whiteSpace: 'initial',
            minHeight: '33px',
        }}>
            <Text css={{margin: 'auto'}}>{orc.产数量}</Text>
        </div>
        <div css={{
            display: 'inline-flex',
            flexGrow: 1,
            maxWidth: '100%',
            borderLeft: '1px solid',
            boxSizing: 'border-box',
            overflowWrap: 'anywhere',
            whiteSpace: 'initial',
            minHeight: '33px',
        }}>
            <Text css={{margin: 'auto'}}>米</Text>
        </div>
        <div css={{
            display: 'inline-flex',
            flexGrow: 1,
            maxWidth: '100%',
            borderLeft: '1px solid',
            boxSizing: 'border-box',
            overflowWrap: 'anywhere',
            whiteSpace: 'initial',
            minHeight: '33px',
        }}>
            <Text css={{margin: 'auto'}}>{orc.数量备}</Text>
        </div>
    </div>
  },
};
//编辑器放在结论页的：
export const config证书概况 = [
    [['订货单位', '订货单位'],],
    [['制造单位', '_$服务单位'],],
    [['许可证编号', '制许可'], ['产品品种', '产品种'],],
    [['产品类别', '产类别'], ['产品编号', {n: '产编号', t: 'B'}],],
    [['产品名称', '产品名'], ['产品标准', '产品标'],],
    [['产品型号(规格)', '型规格'], ['制造日期', '制造日'],],
    [['产品批号', '产批号'], ['数量', '产数量', render数量备],],
];

export const EntranceSetup =
    React.forwardRef((
        {children, show, alone = true, repId, verId, rep}: InternalItemProps, ref
    ) => {
        const atPrint = useMedia('print');
        const toast = useToast();
        const doCheckNames = React.useCallback((verId: string) => {
            const result = assertNamesUnique([{value: rep?.tzFields},
                {value: config设备概况, type: 'esnt'},
                {value: [...itemA结论,]}]);
            toast({title: "完成！", subtitle: result ? "没发现冲突" : "测试开关没开", intent: "success"});
        }, [rep, toast]);
        const {storage, setStorage} = React.useContext(EditStorageContext) as any;
      const getInpFilter = React.useCallback((par: any) => {
        const {_tblFixed, } =par||{};
        return {_tblFixed, };
      }, []);
      const {inp, setInp} = useItemInputControl({ref});
      if (atPrint) return null;
      else return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={'初始化本报告，默认值配置等'}>
            {process.env.REACT_APP_TEST==='true' && <><div>
              <Text variant="h5">构建开发模板时的工具：校验模板的存储name冲突；</Text>
              <Button intent='primary' onPress={() => doCheckNames(verId!)}>校验模板name唯一性</Button>
              <Text variant="h5">设置待测试表格的各列宽度：</Text>
              <TextArea value={storage?._tblFixed || ''} rows={2}
                        onChange={e => setStorage({ ...storage, _tblFixed: e.currentTarget.value || undefined}) }/>
            </div>
            </>
            }
            <hr/>
          </InspectRecordLayout>
      );
  });


const recordPrintList =[
  createItem('Entrance', <EntranceSetup/>),
  createItem('Survey', <DeviceSurvey config={config设备概况} label={'证书的设备概况部分'}/>),
  createItem('Conclusion', <ConclusionPolyZ label={'埋弧焊钢管制造监督检验项目表'}/>),
];

export const OriginalView=
  React.forwardRef((
    { action: modAction,  verId, repId='', rep}
    :OriginalViewProps, ref
  ) => {
    const {list}=useRecordListSubr(ref,rep,recordPrintList,modAction,verId);
    return <React.Fragment>
      {list}
    </React.Fragment>;
  } );
